var _that;
Vue.component("page",{
	template:`
	<div>
			<table class="table table-hover text-center">
		<thead>
			<tr>
				<td v-for="column in columns" v-text="column.text"></td>
			</tr>
			</thead>
			<tbody id="tb">
			<tr v-for="user in users">
			<td v-for="column in columns" v-text="user[column.property]"></td>
			</tr>
			</tbody>
			<tfoot>
			<tr>
				<td colspan="10">
					<div class="pagelist">
					<a href="javascript:void(0)" @click="firstPage()">首页</a>
					<a href="javascript:void(0)" @click="topPage()">上一页</a>
					<div id="ul" v-if="page!=null">
					<a href="javascript:void(0)"  v-for="index in (0,page.totalPage)" v-text="index" @click="goPage(index)"></a>  
					</div>
					<a href="javascript:void(0)" @click="endPage()">尾页</a>
					<a href="javascript:void(0)" @click="downPage()">下一页</a>
					每页显示
			<select v-model="example.number">
			            <option value="5">5</option>
			            <option value="10">10</option>
			            <option value="15">15</option>              	
						</select>条
					</div>
				</td>
			</tr>
			</tfoot>
		</table>
		 			<div>
	共<span id="dataCount" v-if="page!=null" v-text="page.totalCount"></span>条数据
	共<span id="pageCount" v-if="page!=null" v-text="page.totalPage"></span>页
	当前是第<span id="pi" v-if="page!=null" v-text="page.pageIndex"></span>页
	</div>
	<div>
	`,
	data:function(){
		return {
			users:[],
			page:{}
		};
	},
	props:{
		url:{
			type:String
		},
		example:{
			type:Object
		},
		columns:{
			type:Array
		}
	},
	created:function(){
		_that=this;
		this.selectByExample();
	},
	methods:{
		 selectByExample:function(){
  		   $.ajax({
  	            url: _that.url,//请求地址
  	            type: "get",
  	            data:_that.example,
  	            dataType: "json",
  	            success: function(data) {//data是默认的，接收前台返回的数据    
  	            	if(data.obj.pageIndex>data.obj.totalPage){
  	            		_that.example.pageIndex=data.obj.totalPage;
  	            	}
  	            	_that.page=data.obj;
  	            	_that.users=data.list;
  	            }
  	        });
  	   },
  	   downPage:function(){
  		   if(_that.example.pageIndex<_that.page.totalPage){
  			 _that.example.pageIndex=_that.example.pageIndex+1;
  		   }
  	   },
  	   topPage:function(){
  		   if(_that.example.pageIndex>1){
  			 _that.example.pageIndex=_that.example.pageIndex-1;
  		   }
  	   },
  	   goPage:function(index){
  		 _that.example.pageIndex=index;
  	   },
  	   firstPage:function(){
  		 _that.example.pageIndex=1;
  	   },
  	   endPage:function(){
  		 _that.example.pageIndex=_that.page.totalPage;
  	   }
     },
     watch:{
  	   example:{
  	   			//深度监听 监听对象中属性的变化以及集合中对象的变化
  	   			handler:function(n,o){
  	   				this.selectByExample();
  	   			},
  	   			deep:true
  	   	}
  	   }
	})